<!--
@license
Copyright 2019 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!--
     A D3-based implementation of a scatter plot matrix of the sessions
     groups.

     For more details on a scatter plot matrix visualization see for example:
     https://www.itl.nist.gov/div898/handbook/eda/section3/eda33qb.htm

     There are 3 elements involved in the scatter plot visualization:

     1. <tf-hparams-scatter-plot-matrix-plot>
       Renders the actual scatter plot matrix
     2. <tf-hparams-scale-and-color-controls>
       A control panel for configuring the behavior of the plot (e.g. scale
       of each axis, colormap, etc.)
     3. <tf-hparams-scatter-plot-matrix-view>
       The container element for the above 2 elements.
-->
<link rel="import" href="../tf-imports/polymer.html" />
<link
  rel="import"
  href="../tf-hparams-scale-and-color-controls/tf-hparams-scale-and-color-controls.html"
/>
<link
  rel="import"
  href="../tf-hparams-scatter-plot-matrix-plot/tf-hparams-scatter-plot-matrix-plot.html"
/>
<link
  rel="import"
  href="../tf-hparams-session-group-details/tf-hparams-session-group-details.html"
/>
<link
  rel="import"
  href="../tf-hparams-session-group-values/tf-hparams-session-group-values.html"
/>
<link rel="import" href="../tf-imports/vaadin-split-layout.html" />

<dom-module id="tf-hparams-scatter-plot-matrix-view">
  <template>
    <div class="pane">
      <vaadin-split-layout vertical>
        <!-- Controls behavior of the scatter plot matrix
             outputs the configured options to the _options property. -->
        <tf-hparams-scale-and-color-controls
          class="section"
          id="controls"
          configuration="[[configuration]]"
          session-groups="[[sessionGroups]]"
          options="{{_options}}"
        >
        </tf-hparams-scale-and-color-controls>
        <vaadin-split-layout vertical>
          <!-- The actual scatter plot matrix -->
          <tf-hparams-scatter-plot-matrix-plot
            class="section"
            id="plot"
            visible-schema="[[configuration.visibleSchema]]"
            session-groups="[[sessionGroups]]"
            selected-session-group="{{_selectedGroup}}"
            closest-session-group="{{_closestGroup}}"
            options="[[_options]]"
          >
          </tf-hparams-scatter-plot-matrix-plot>
          <vaadin-split-layout vertical>
            <tf-hparams-session-group-values
              class="section"
              id="values"
              visible-schema="[[configuration.visibleSchema]]"
              session-group="[[_closestOrSelected(
                                 _closestGroup, _selectedGroup)]]"
            >
            </tf-hparams-session-group-values>
            <!-- Shows session group details for the clicked marker. -->
            <tf-hparams-session-group-details
              class="section"
              id="details"
              backend="[[backend]]"
              experiment-name="[[experimentName]]"
              session-group="[[_selectedGroup]]"
              visible-schema="[[configuration.visibleSchema]]"
            >
            </tf-hparams-session-group-details>
          </vaadin-split-layout>
        </vaadin-split-layout>
      </vaadin-split-layout>
    </div>
    <style>
      .pane {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .section {
        margin: 10px;
      }
      #controls {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        height: auto;
        overflow-y: auto;
        max-height: fit-content;
      }
      #plot {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        height: auto;
        overflow-y: auto;
        max-height: fit-content;
      }
      #values {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        height: 95px;
        overflow-y: auto;
        max-height: fit-content;
      }
      #details {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
        height: auto;
        overflow-y: auto;
        max-height: fit-content;
      }
      vaadin-split-layout {
        height: 100%;
      }
    </style>
  </template>

  <script>
    'use strict';
    Polymer({
      is: 'tf-hparams-scatter-plot-matrix-view',
      properties: {
        /* Public properties */
        // See the property description in tf-hparams-query-pane.html
        backend: Object,
        // See the property description in tf-hparams-query-pane.html
        experimentName: String,
        // See the property description in tf-hparams-query-pane.html
        configuration: Object,
        // See the property description in tf-hparams-query-pane.html
        sessionGroups: Array,
      },

      _closestOrSelected: function(closestSessionGroup, selectedSessionGroup) {
        if (closestSessionGroup !== null) {
          return closestSessionGroup;
        }
        return selectedSessionGroup;
      },
    });
  </script>
</dom-module>
